<template>
	<view class="inputbox" :style="'margin:'+boxStyle">
	<!-- <view class="inputbox" > -->
		<text class="title fs-28">{{ title }}</text>
		<view class="rightcontent fs-24" :class="{showBborder:showBborder}">
			<view v-if="readonly" @click="inputclick(title)" class="leftinput">
				<u--input :readonly="readonly" border="none" fontSize="24rpx" class="uni-input fs-24" none placeholder-style="color:#B3B3B3" :placeholder="placeholder"></u--input>
			</view>
			<u--input v-else border="none" class="uni-input" none fontSize="24rpx" placeholder-style="color:#B3B3B3" :placeholder="placeholder"></u--input>
			<view v-if="rightText" class="rightText">{{ rightText }}</view>
			<u-icon v-if="icon" name="arrow-right" color="#885F69" size="14"></u-icon>
		</view>
	</view>
</template>

<script>
export default {
	name: 'uni-inputs',
	props: {
		title: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: ''
		},
		rightText: {
			type: String,
			default: ''
		},
		icon: {
			type: Boolean,
			default: false
		},
		readonly: {
			type: Boolean,
			default: false
		},
		showBborder: {
			type: Boolean,
			default: true
		},
		margin:{
			type:Array,
			default:()=>[20,30,20,30]
		},
	},
	data() {
		return {};
	},
	computed:{
		boxStyle:function(){
			// return {
			// 	margin:this.margin.join('rpx ')+'rpx'
			// }
			return this.margin.join('rpx ')+'rpx'
			
		}
	},
	methods: {
		inputclick(title) {
			uni.showToast({
				title:title,
				icon:'none',
				duration: 2000
			})
		}
	}
};
</script>

<style lang="scss">
.inputbox {
	// margin: 20px 30rpx;
	display: flex;
  align-items: center;
	.title {
		color: #474747;
		width: 128rpx;
		// text-align-last:justify;
	}
	.rightcontent {
		display: flex;
		flex: 1;
		
		margin-left: 10rpx;
		align-items: center;
		.leftinput {
			flex: 1;
		}
	}
	.showBborder{
		border-bottom: 1px solid #e6e6e6;
	}
	.rightText {
		color: #b3b3b3;
	}
}
</style>
